import { readable, writable, derived } from 'svelte/store';
import { page } from '$app/stores';

export interface MenuItem {
	active: boolean;
	href: string;
	title: string;
	tag: boolean;
	icon?: string;
}

const _menuItems: MenuItem[] = [
	{
		active: false,
		href: '/',
		title: '总览',
		tag: false,
		icon: 'icon-dashboard'
	},
	{
		active: false,
		href: '/coupon',
		title: '优惠券',
		tag: true,
		icon: 'icon-coupon'
	},
	{
		active: false,
		href: '/prom',
		title: '促销活动',
		tag: true,
		icon: 'icon-prom'
	},
	{
		active: false,
		href: '/card_discount',
		title: '卡折扣',
		tag: true,
		icon: 'icon-card'
	},
	{
		active: false,
		href: '/more',
		title: '更多',
		tag: false,
		icon: 'icon-more'
	}
];

export const menus = derived(page, ($page, set: (v: MenuItem[]) => void) => {
	set(
		_menuItems.map((i) => {
			i.active = i.href === $page.path;
			return i;
		})
	);
});

export const tags = derived(menus, ($menus, set: (v: MenuItem[]) => void) => {
	set($menus.filter((i) => i.tag));
});

export const isSideBarOpen = writable(false);
